<!-- 公共评论组件 -->
<script lang="ts" setup>
import { getCommentList, sendComment } from '~/api/home'

const { uid, title } = defineProps({
  uid: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '',
  },
})
const dayjs = useDayjs()
const store = useUserStore()
const userInfo = computed(() => store.userInfo)
const commentList = ref<any[]>([])
const comments = ref('')
const loading = ref(false)
const loading2 = ref(false)
// 发送评论
function sendComments(t) {
  const params = {
    article_uid: uid,
    title_name: title,
    contents: comments.value,
    nickname: userInfo.value.real_name,
    comment_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  }
  loading.value = true
  sendComment(params).then((res) => {
    loading.value = false
    getComments()
  }).catch(() => {
    loading.value = false
  })
  comments.value = ''
}

// 获取评论
function getComments() {
  const params = {
    page: {
      pageNo: 1,
      rownumber: 50,
    },
    condition: [{ colName: 'article_uid', ruleType: 'eq', value: uid }],
  }
  loading2.value = true
  getCommentList(params).then((res) => {
    loading2.value = false
    commentList.value = res.data
  })
}
function toLogin() {
  store.setLoginVisible(true)
}
onMounted(() => {
  getComments()
})

function maskName(name, userNo) {
  if (name && (name === '游客' || userNo === userInfo.value.user_no))
    return name
  // 检查名字长度
  if (name.length === 1) {
    // 如果名字只有一个字符，直接返回原名
    return name
  }
  else if (name.length === 2) {
    // 如果名字有两个字符，将第一个字符替换为 *
    return '*'.concat(name.slice(1))
  }
  else {
    return name[0] + name.slice(1, -1).replace(/./g, '*') + name[name.length - 1]
  }
}
</script>

<template>
  <div class="my-20px px-15">
    <div class="my-20px inline-block py-10px text-24px text-#111 font-600" border="b-solid b-2px #AC8358">
      <span>
        文章评论
      </span>
      <i class="i-ri:arrow-right-double-line text-18px" />
    </div>
    <div style="display: flex; align-items: center; margin: 10px 0;">
      <img
        class="h-55px w-55px" style="border-radius: 44px;" :src="userInfo.photo_url ? userInfo.photo_url
          : 'http://videodocument1.obs.cn-north-9.myhuaweicloud.com/health/20231209/20231209194720963905.jpg'" alt=""
      >
      <div style="margin:0 15px;">
        {{ userInfo.real_name ? userInfo.real_name : '游客' }}
      </div>
      <div v-if="!userInfo.real_name">
        <el-button color="#AC8358" class="" plain @click="toLogin()">
          立即登录
        </el-button>
      </div>
    </div>
    <div class="relative w-full rounded-xl bg-#fff p-10px">
      <el-input
        v-model="comments" type="textarea" :rows="5" placeholder="请输入评论内容" resize="none" border="none"
        outline="none"
      />
      <div class="flex justify-between">
        <span />
        <el-button :loading="loading" color="#AC8358" class="" style="color:#FFF;" @click="sendComments(1)">
          发布
        </el-button>
      </div>
    </div>

    <div v-if="commentList && commentList.length" class="mb-10px mt-30px text-size-20px text-#222 font-500">
      最近评论
    </div>
    <div v-loading="loading2">
      <div v-for="item in commentList" :key="item.id" class="my-10px py-10px" border="b-solid b-1px #E5E5EA">
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <div style="display: flex; align-items: center;">
            <img
              class="h-33px w-33px" style="border-radius: 44px;"
              src="http://videodocument1.obs.cn-north-9.myhuaweicloud.com/health/20231209/20231209194720963905.jpg"
              alt=""
            >
            <div style="padding-left: 15px;">
              {{ maskName(item.nickname || item.create_user_disp || item.create_user, item.create_user) }}
            </div>
          </div>
          <div class="text-#9D9D9D">
            {{ item.comment_time || item.create_time }}
          </div>
        </div>
        <p style="word-wrap: break-word; padding: 8px 0 10px 48px;">
          {{ item.contents || '' }}
        </p>
      </div>
    </div>
  </div>
</template>

<style
  lang="scss"
  scoped
>
:deep(.el-textarea) {
  border: 0;

  .el-textarea__inner {
    border: none;
    outline: none;
    resize: none;
    box-shadow: none;
  }
}
</style>
